<template>
	<view style="width: 100%;">
		<u-input type="select" v-model="valueText"
			:placeholder="placeholder" 
			@click="open"></u-input>
		<u-select v-model="show" :list="options"
			:value-name="valueName"
			:label-name="labelName"
			:default-value="defaultVal"
			@confirm="selConfirm">
		</u-select>
	</view>
</template>

<script>
	export default {
		props: {
			placeholder: String,
			valueName: {
				type: String,
				default: 'value'
			},
			labelName: {
				type: String,
				default: 'label'
			},
			options: {
				type: Array,
				default () {
					return []
				}
			},
			value: String
		},
		data() {
			return {
				show: false,
				defaultVal: []
			}
		},
		computed: {
			valueText: {
				get() {
					let _res = ''
					let _index = this.options.findIndex(item => {
						return item[this.valueName] === this.value
					})
					
					if(_index !== -1) {
						_res = this.options[_index][this.labelName]
						this.defaultVal = [_index]
					}
					
					return _res
				},
				set() {
					
				}
			}
		},
		methods: {
			open() {
				this.show = true
			},
			selConfirm(e) {
				this.$emit('input', e[0].value)
			}
		}
	}
</script>
